<template>
  <v-form v-model="valid" ref="myBrandForm">
    <v-text-field v-model="brand.name" label="请输入品牌名称" required :rules="nameRules"/>
    <v-text-field v-model="brand.letter" label="请输入品牌首字母" required :rules="letterRules"/>
    <v-cascader
            url="/item/category/list"
            multiple 
            required
            v-model="brand.categories"
            label="请选择商品分类"/>
    <!--图片上传-->
    <v-layout row>
      <v-flex xs3>
        <span style="font-size: 16px; color: #444">品牌LOGO：</span>
      </v-flex>
      <v-spacer/>
      <v-flex>
        <v-upload
          v-model="brand.image"
          url="/upload/image"
          :multiple="false"
          :pic-width="250"
          :pic-height="90"/>
      </v-flex>
    </v-layout>
    <v-layout class="my-4" row>
      <v-spacer/>
      <v-btn color="primary" @click="submitForm">提交</v-btn>
      <v-btn color="error" @click="clearForm">重置</v-btn>
    </v-layout>
  </v-form>
</template>

<script>
  export default {
    name: "MyBrandForm",
    data() {
      return {
        valid: true, //表单校验结果标记
        brand: {
          name: '',//品牌名称
          letter: '', // 品牌首字母
          image: '',// 品牌logo
          categories: [], // 品牌所属的商品分类数组
        },
        nameRules: [
          v => !!v || "品牌名称不能为空",
          v => v.length > 1 || "品牌名称至少两位"
        ],
        letterRules: [
          v => !!v || "首字母不能为空",
          v => /^[A-Z]{1}$/.test(v) || "品牌字母只能是A~Z的大写字母"
        ]
      }
    },
    props: {
      oldBrand: {
        type: Object,
      },
      isEdit: {
        type: Boolean,
        default: false,
      }
    },
    watch: {
      oldBrand: { //监控oldBrand的变化 需要判断监听到的是否为空，如果为空，应该进行初始化
        deep: true,
        handler(val) {
          if (val) {
            // 注意不要直接复制，否则这边的修改会影响到父组件的数据，copy属性即可
            this.brand = Object.deepCopy(val); //深度克隆
          } else {
            // 为空，初始化brand
            this.brand = {name: "", letter: "", image: "", categories: []};
          }
        }
      }
    },
    methods: {
      submitForm() {
        //1.表单校验
        if (this.$refs.myBrandForm.validate()) {
          // 2、定义一个请求参数对象，通过解构表达式来获取brand中的属性
          const {...params} = this.brand;
          // 3、数据库中只要保存分类的id即可，因此我们对categories的值进行处理,只保留id，并转为字符串
          params.categories = params.categories.map(c => c.id).join(",");
          params.letter = params.letter.toUpperCase();
          // 4、将数据提交到后台
          this.$http(
            {
              method: this.isEdit ? 'put' : 'post', // 动态判断是POST还是PUT
              url: '/item/brand',
              data: this.$qs.stringify(params)
            }
          ).then(() => {
            this.$message.success("保存成功！");
            //关闭窗口
            this.$emit("close");
          }).catch(() => {
            this.$message.error("保存失败！");
          })
        }
      },
      clearForm() {
        this.$refs.myBrandForm.reset();
        // 需要手动清空商品分类
        this.categories = [];
      }
    }
  }
</script>

<style scoped>

</style>
